<template>
    <div class="login">
      <div class="loginTop" >扫码登录</div>
      <div class="loginContent">
        <img :src="this.sginImgURL" alt="" style="width:200px;height:200px">
       <button @click="afreshGetQR">重新获取二维码</button>
      </div>
    </div>
  </template>
  
  <script>
  import { qrCodeLoginKey,qrCodeLoginImg,qrCodeLoginCheck,getLoginStatus} from '@/request/api/home'
  import {getUserDetail} from '@/request/api/home'
      export default {
          data(){
            return{
              sginImgURL:"",
              QrKey:"",
               codeIsValid: true,
               keyStatus:{}
            }
          },
  
created(){
  this.login()
},
      
        methods:{
       
          //  获取key
          login: async function() {
            let nowtime = Date.now();
            let key = await qrCodeLoginKey(nowtime)
            this.QrKey=key.data.data.unikey
            // 获取二维码
            let QrImg = await qrCodeLoginImg(this.QrKey)
           this.sginImgURL=QrImg.data.data.qrimg

  
        const timer=setInterval(async()=>{
          //  check一下
          let nowtime2 = new Date().getTime();
          this.keyStatus = await qrCodeLoginCheck(this.QrKey,nowtime2)
          console.log(this.keyStatus)
          if (this.keyStatus.data.code === 801) {
          // 二维码过期
          console.log('二维码已失效')
          this.codeIsValid = false
        } else if (this.keyStatus.data.code === 802) {
          // 授权登录中
          console.log('授权登录中...')
        } else if (this.keyStatus.data.code === 803) {
          // 登录成功 会返回 cookie
          //  this.cookier = keyStatus.data.cookie
          this.$router.push('/InfoUser')
          const  loginStatus = await getLoginStatus()
         console.log(loginStatus)
          let userDetail = await getUserDetail(loginStatus.data.data.id)
          console.log(userDetail,'userdetail')
          this.$store.commit('updateUser',userDetail)
          clearInterval(timer)
        
        }
      }, 10000)
    },
      afreshGetQR () {
      console.log('重新获取二维码')
      this.login()
      this.codeIsValid = true
    },
 }
          }
      
        
      
  </script>
  
  <style lang="less" scoped>
  .login {
    width: 100%;
    height: 13.34rem;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(248, 97, 97);
    .loginTop {
      margin-top: 1rem;
      font-size: 1rem;
      color: #fff;
    }
    .loginContent {
      width: 100%;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      margin-top: 2rem;
   
   
    }
  }
  </style>